<template>
    <view class="bg-white min-h-screen">
        <!-- 导航栏 -->
        <view class="px-4 py-3 border-b border-slate-100">
            <view class="flex justify-between items-center">
                <button class="p-2" @tap="goBack">
                    <text class="iconfont icon-arrow-left text-slate-800"></text>
                </button>
                <text class="text-lg font-medium text-slate-800">添加项目</text>
                <button class="p-2 opacity-0">
                    <text class="iconfont icon-arrow-left"></text>
                </button>
            </view>
        </view>

        <!-- 表单内容 -->
        <view class="px-5 py-6">
            <form @submit="saveProject">
                <!-- 项目名称 -->
                <view class="mb-6">
                    <text class="block text-sm font-medium text-slate-700 mb-2">项目名称</text>
                    <input class="premium-input" type="text" placeholder="输入项目名称..." v-model="project.title"
                        maxlength="30" />
                </view>

                <!-- 项目描述 -->
                <view class="mb-6">
                    <text class="block text-sm font-medium text-slate-700 mb-2">项目描述</text>
                    <textarea class="premium-input" placeholder="描述你的项目..." v-model="project.description"
                        maxlength="200" auto-height />
                </view>

                <!-- 项目状态 -->
                <view class="mb-6">
                    <text class="block text-sm font-medium text-slate-700 mb-2">项目状态</text>
                    <view class="grid grid-cols-3 gap-2">
                        <button v-for="(status, index) in statuses" :key="index"
                            class="py-2 rounded-lg text-center text-sm" :class="getStatusClass(status.id)"
                            @tap="selectStatus(status.id)">
                            {{ status.name }}
                        </button>
                    </view>
                </view>

                <!-- 项目标签 -->
                <view class="mb-6">
                    <view class="flex justify-between items-center mb-2">
                        <text class="text-sm font-medium text-slate-700">项目标签</text>
                        <button class="text-xs text-indigo-600 flex items-center" @tap="showTagInput = !showTagInput">
                            <text class="iconfont icon-plus text-xs mr-1"></text>
                            添加标签
                        </button>
                    </view>

                    <view v-if="showTagInput" class="mb-2 flex">
                        <input class="premium-input flex-1 mr-2" type="text" placeholder="输入标签名称" v-model="newTag"
                            maxlength="10" />
                        <button class="bg-indigo-500 text-white px-4 rounded-lg" @tap="addTag">
                            添加
                        </button>
                    </view>

                    <view v-if="project.tags.length === 0" class="bg-slate-50 rounded-lg p-4 text-center">
                        <text class="text-slate-500 text-sm">添加标签来分类你的项目</text>
                    </view>

                    <view v-else class="flex flex-wrap">
                        <view v-for="(tag, index) in project.tags" :key="index"
                            class="bg-slate-100 rounded-full px-3 py-1 text-sm text-slate-600 mr-2 mb-2 flex items-center">
                            <text>{{ tag }}</text>
                            <button class="ml-1 p-1" @tap="removeTag(index)">
                                <text class="iconfont icon-close text-xs text-slate-500"></text>
                            </button>
                        </view>
                    </view>
                </view>
            </form>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 项目数据
interface Task {
    title: string;
    completed: boolean;
}

const project = ref({
    title: '',
    description: '',
    status: 'planned',
    tags: [] as string[],
    startDate: '',
    endDate: '',
    tasks: [] as Task[],
    progress: 0
});

// 项目状态
const statuses = ref([
    { id: 'planned', name: '计划中' },
    { id: 'in-progress', name: '进行中' },
    { id: 'completed', name: '已完成' }
]);

// 标签输入
const showTagInput = ref(false);
const newTag = ref('');

// 选择状态
const selectStatus = (status: string) => {
    project.value.status = status;
};

// 获取状态样式
const getStatusClass = (status: string) => {
    if (project.value.status === status) {
        switch (status) {
            case 'planned':
                return 'bg-blue-100 text-blue-600';
            case 'in-progress':
                return 'bg-amber-100 text-amber-600';
            case 'completed':
                return 'bg-green-100 text-green-600';
            default:
                return 'bg-indigo-100 text-indigo-600';
        }
    }
    return 'bg-slate-50 text-slate-600';
};

// 添加标签
const addTag = () => {
    if (newTag.value.trim() && !project.value.tags.includes(newTag.value.trim())) {
        project.value.tags.push(newTag.value.trim());
        newTag.value = '';
        showTagInput.value = false;
    }
};

// 删除标签
const removeTag = (index: number) => {
    project.value.tags.splice(index, 1);
};

// 显示开始日期选择器
const showStartDatePicker = () => {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    const day = now.getDate();

    uni.showDatePicker({
        current: `${year}-${month}-${day}`,
        start: `${year - 1}-${month}-${day}`,
        end: `${year + 5}-${month}-${day}`,
        success: (res) => {
            project.value.startDate = res.date;
        }
    });
};

// 显示结束日期选择器
const showEndDatePicker = () => {
    if (!project.value.startDate) {
        uni.showToast({
            title: '请先选择开始日期',
            icon: 'none'
        });
        return;
    }

    uni.showDatePicker({
        current: project.value.startDate,
        start: project.value.startDate,
        end: `${new Date().getFullYear() + 5}-12-31`,
        success: (res) => {
            project.value.endDate = res.date;
        }
    });
};

// 添加任务
const addTask = () => {
    if (project.value.tasks.length < 10) {
        project.value.tasks.push({
            title: '',
            completed: false
        });
    }
};

// 删除任务
const removeTask = (index: number) => {
    project.value.tasks.splice(index, 1);
    updateProgress();
};

// 切换任务完成状态
const toggleTask = (index: number) => {
    project.value.tasks[index].completed = !project.value.tasks[index].completed;
    updateProgress();
};

// 更新进度
const updateProgress = () => {
    if (project.value.tasks.length === 0) {
        project.value.progress = 0;
        return;
    }

    const completedTasks = project.value.tasks.filter(task => task.completed).length;
    project.value.progress = Math.round((completedTasks / project.value.tasks.length) * 100);
};

// 保存项目
const saveProject = () => {
    // 表单验证
    if (!project.value.title.trim()) {
        uni.showToast({
            title: '请输入项目名称',
            icon: 'none'
        });
        return;
    }

    if (!project.value.startDate) {
        uni.showToast({
            title: '请选择开始日期',
            icon: 'none'
        });
        return;
    }

    if (!project.value.endDate) {
        uni.showToast({
            title: '请选择截止日期',
            icon: 'none'
        });
        return;
    }

    // 过滤空的任务
    project.value.tasks = project.value.tasks.filter(t => t.title.trim() !== '');

    // 更新进度
    updateProgress();

    // 这里应该将数据保存到数据库或本地存储
    // 为了演示，我们只是显示一个成功提示
    uni.showToast({
        title: '项目创建成功',
        icon: 'success',
        success: () => {
            setTimeout(() => {
                goBack();
            }, 1500);
        }
    });
};

// 返回上一页
const goBack = () => {
    uni.navigateBack();
};
</script>

<style>
/* 添加额外的图标 */
.icon-arrow-left:before {
    content: '\e628';
}

.icon-chevron-right:before {
    content: '\e629';
}

.icon-calendar:before {
    content: '\e630';
}

.icon-trash:before {
    content: '\e631';
}

.icon-close:before {
    content: '\e635';
}

.icon-plus:before {
    content: '\e636';
}
</style>